<template>
  <div class="paper-test">
    <el-card class="paper-selection-card">
      <template #header>
        <div class="card-header">
          <span>试卷测验</span>
        </div>
      </template>
      
      <!-- 试卷选择 -->
      <div class="paper-selection">
        <el-form :model="searchForm" label-width="80px" class="search-form">
          <el-form-item label="试卷名称">
            <el-input v-model="searchForm.name" placeholder="请输入试卷名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchPapers">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
        
        <!-- 试卷列表 -->
        <el-table :data="paperList" style="width: 100%" v-loading="loading">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="试卷名称" />
          <el-table-column prop="totalDuration" label="总时长(分钟)" width="120" />
          <el-table-column prop="totalQuestions" label="总题数" width="100" />
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" size="small" @click="startTest(scope.row)">开始测验</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <el-pagination
          v-if="total > 0"
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
          class="pagination"
        />
      </div>
    </el-card>
    
    <!-- 测验设置对话框 -->
    <el-dialog v-model="showTestSettingsDialog" title="测验设置" width="500px">
      <el-form :model="testSettings" label-width="100px">
        <el-form-item label="试卷名称">
          <el-input v-model="selectedPaper.name" disabled />
        </el-form-item>
        <el-form-item label="总时长">
          <el-input v-model="selectedPaper.totalDuration" disabled>
            <template #append>分钟</template>
          </el-input>
        </el-form-item>
        <el-form-item label="总题数">
          <el-input v-model="selectedPaper.totalQuestions" disabled />
        </el-form-item>
        <el-form-item label="答题模式">
          <el-radio-group v-model="testSettings.mode">
            <el-radio label="sequential">顺序答题</el-radio>
            <el-radio label="random">随机答题</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示答案">
          <el-switch v-model="testSettings.showAnswers" />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showTestSettingsDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmStartTest">开始测验</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as paperApi from '@/api/paper'

// 定义试卷数据类型
interface Paper {
  id: number
  name: string
  totalDuration: number
  totalQuestions: number
  createTime: string
}

// 搜索表单
const searchForm = reactive({
  name: ''
})

// 试卷列表数据
const paperList = ref<Paper[]>([])
const loading = ref(false)
const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)

// 测验设置
const showTestSettingsDialog = ref(false)
const selectedPaper = ref<Paper>({
  id: 0,
  name: '',
  totalDuration: 120,
  totalQuestions: 100,
  createTime: ''
})

const testSettings = reactive({
  mode: 'sequential', // sequential: 顺序答题, random: 随机答题
  showAnswers: false
})

// 路由
const router = useRouter()

// 搜索试卷
const searchPapers = async () => {
  loading.value = true
  try {
    const params: any = {
      page: currentPage.value,
      size: pageSize.value
    }
    
    if (searchForm.name) {
      params.name = searchForm.name
    }
    
    const res: any = await paperApi.searchPapers(params)
    if (res.code === 200) {
      paperList.value = res.data
      total.value = res.data.length // 实际项目中应该从后端获取总数
      ElMessage.success('搜索成功')
    } else {
      ElMessage.error(res.message || '搜索失败')
    }
  } catch (error) {
    ElMessage.error('搜索失败')
  } finally {
    loading.value = false
  }
}

// 重置搜索
const resetSearch = () => {
  searchForm.name = ''
  currentPage.value = 1
  searchPapers()
}

// 处理分页变化
const handlePageChange = (page: number) => {
  currentPage.value = page
  searchPapers()
}

// 开始测验
const startTest = (paper: Paper) => {
  selectedPaper.value = { ...paper }
  showTestSettingsDialog.value = true
}

// 确认开始测验
const confirmStartTest = () => {
  // 跳转到测验页面
  router.push({
    path: '/paper-test/practice',
    query: {
      paperId: selectedPaper.value.id.toString(),
      mode: testSettings.mode,
      showAnswers: testSettings.showAnswers.toString()
    }
  })
}

// 组件挂载时获取试卷列表
onMounted(() => {
  searchPapers()
})
</script>

<style scoped>
.paper-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.dialog-footer {
  text-align: right;
}
</style>